<script type="text/javascript">
	var f_change_role = function(as_role_id){
		setLoading();
		$.ajax({
			type: 'POST', url: gs_path+'/app/ajax_change_role', cache: false, data: { ajax: '1', role_id:as_role_id, sessid: sessid },
			success: function(data) { redirect(gs_path+'/app/system/'); },
			error: function(xhr, ajaxOptions, thrownError) { var ls_message = ''; var ls_logmessage = ''; if (xhr.status == 0) { ls_message = 'You are offline!!\n Please Check Your Network.'; ls_logmessage = 'Disconnected' } else if (xhr.status == 404) { ls_message = 'Requested URL not found.'; ls_logmessage = 'Not Found' } else if (xhr.status == 500) { ls_message = 'Internal Server Error.'; ls_logmessage = 'Internal Server Error' } else if (thrownError == 'parsererror') { ls_message = 'Error.\nParsing JSON Request failed.' } else if (thrownError == 'timeout') { ls_message = 'Request Time out.'; ls_logmessage = 'Request Time out' } else { ls_message = 'Unknow Error.\n' + xhr.responseText; ls_logmessage = 'Unknow Error' } addLog('Response Page From [<a href="' + ls_url + '">' + ls_url + '</a>] is <b>' + nl2br(ls_logmessage) + '</b><br /><br />' + nl2br(htmlentities(xhr.responseText)), 'error'); alert(ls_message); setLoading(false); }, dataType: "html"
		});
	};
</script>
<style type="text/css">
#role_container{ 
	margin:0px 50px;
}
#role_container .item_box{
	background:#EEE;
	border:#CCC solid 1px;
	border-radius:4px;
	cursor:pointer;
	display:block;
	float:left;
	height:120px;
	margin:5px;
	width:120px;
	
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}

#role_container .item_box img{
	margin:20px 0px 5px 35px;
	width:50px;
	height:50px;
	text-align:center;
}

#role_container .item_box:hover{
	background:#f0e3bf;
	border:#d4a375 solid 1px;
}

#role_container .selected{
	background:#f7cc8f !important;
	border:#d4a375 solid 1px !important;
}

#role_container .item_caption{
	margin: 0 auto;
	text-align:center;
	width:auto;
}
</style>

<div class="content_box">
    <div class="head">
        <div class="tl">Dashboard</div>
        <div class="tr"><div class="button_set" id="action_bar">&nbsp;</div></div>
    </div>
    
    <div class="content">
    	<?php if(count($arr_role) > 1){ ?>
        <fieldset>
            <legend>Select Role</legend>
            <div id="role_container">
            <?php
                for($i=0, $max_i=count($arr_role); $i<$max_i; $i++){
                    $row	= $arr_role[$i];
                    $ls_icon_path	= str_replace('index.php/', '', base_url()) . 'files/ROLEICON.'.($row['icon'] == '' ? $row['role_id'].'.png' : $row['icon']);
                    echo '	<div class="item_box'. (ROLE==$row['role_id'] ? ' selected' : '') . '" onclick="f_change_role(\''.$row['role_id'].'\');">
                                <img src="'.$ls_icon_path.'" /><br />
                                <div class="item_caption">'.$row['role_name'].'</div>
                            </div>';
                }
            //echo $row['role_name'];
			?>
            </div>
            <br clear="all" />
        </fieldset>
        <?php } ?>
        <fieldset>
            <legend>Summary</legend>
			<table width="100%" cellpadding="5" cellspacing="5">
            <tr>
				<td width="30%" style="border:1px solid #CCC;"><div id="chart_container1" style="width:100%; height:300px;"></div></td>
                <td width="30%" style="border:1px solid #CCC;"><div id="chart_container2" style="width:100%; height:300px;"></div></td>
                <td width="30%" style="border:1px solid #CCC;"><div id="chart_container3" style="width:100%; height:300px;"></div></td>
            </tr>
            </table>
            <script type="text/javascript">
				var chart;
				$(document).ready(function() {
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'chart_container1',
							type: 'column'
						},
						title: {
							text: 'Pertumbuhan Industri'
						},
						subtitle: {
							text: '(5 tahun)'
						},
						xAxis: {
							categories: [
								'2013',
								'2014',
								'2012',
								'2011',
								'2010'
							]
						},
						yAxis: {
							min: 0,
							title: {
								text: 'Jumlah Asset(/1000)'
							}
						},
						legend: {
							layout: 'vertical',
							backgroundColor: '#FFFFFF',
							align: 'left',
							verticalAlign: 'top',
							x: 100,
							y: 70,
							floating: true,
							shadow: true
						},
						tooltip: {
							formatter: function() {
								return ''+
									this.x +': '+ this.y +' prs';
							}
						},
						plotOptions: {
							column: {
								pointPadding: 0.2,
								borderWidth: 0
							}
						},
							series: [
							{
							name: 'Asset Tetap',
							data: [49.9, 71.5, 106.4, 129.2, 144.0]
				
						}, {
							name: 'Asset Lancar',
							data: [48.9, 38.8, 39.3, 41.4, 47.0]
				
						}, {
							name: 'Karyawan',
							data: [42.4, 33.2, 34.5, 39.7, 52.6]
				
						}]
					});
					
				});
				
				$(document).ready(function() {
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'chart_container2',
							type: 'column'
						},
						title: {
							text: 'Pertumbuhan Produk'
						},
						subtitle: {
							text: '(5 Tahun)'
						},
						xAxis: {
							categories: ['Jumlah']
						},
						yAxis: {
							min: 0,
							title: {
								text: 'Jml. Produk'
							}
						},
						legend: {
							layout: 'vertical',
							backgroundColor: '#FFFFFF',
							align: 'left',
							verticalAlign: 'top',
							x: 100,
							y: 70,
							floating: true,
							shadow: true
						},
						tooltip: {
							formatter: function() {
								return ''+
									this.x +': '+ this.y +' produk';
							}
						},
						plotOptions: {
							column: {
								pointPadding: 0.2,
								borderWidth: 0
							}
						},
							series: [{
							name: 'Makanan',
							data: [42.4, 33.2, 34.5, 39.7, 52.6]
				
						}, {
							name: 'Minuman',
							data: [83.6, 78.8, 98.5, 93.4, 106.0]
				
						}, {
							name: 'Peralatan',
							data: [49.9, 71.5, 106.4, 129.2, 144.0]
				
						}, {
							name: 'Fashion',
							data: [42.4, 33.2, 34.5, 39.7, 52.6]
						}]
					});
					
				});
				
				$(document).ready(function() {
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'chart_container3',
							type: 'column'
						},
						title: {
							text: 'Pertumbuhan Pelanggan'
						},
						subtitle: {
							text: '(5 Tahun)'
						},
						xAxis: {
							categories: ['Jumlah']
						},
						yAxis: {
							min: 0,
							title: {
								text: 'Jml. Pelanggan'
							}
						},
						legend: {
							layout: 'vertical',
							backgroundColor: '#FFFFFF',
							align: 'left',
							verticalAlign: 'top',
							x: 100,
							y: 70,
							floating: true,
							shadow: true
						},
						tooltip: {
							formatter: function() {
								return ''+
									this.x +': '+ this.y +' orang';
							}
						},
						plotOptions: {
							column: {
								pointPadding: 0.2,
								borderWidth: 0
							}
						},
							series: [{
							name: 'Warga Negara Indonesia',
							data: [42.4, 33.2, 34.5, 39.7, 52.6]
				
						}, {
							name: 'Warga Negara Asing',
							data: [87.4, 90.3, 35.6, 99.1, 78.2]
				
						}]
					});
					
				});
				
			</script>
		</fieldset>
    </div> 
    
    <div class="foot" style="border-top:none">
        <div class="bl">&nbsp;<div class="debug_url" style="display:none;margin:-15px 0px 0px 0px;"><img src="<?php echo base_url(); ?>content/images/load.png" alt="" border="0" onclick="loadPage('<?php echo '/'.$this->data['controller_name'] . '/' . $this->data['action_name'] . '/' .(trim($_SERVER['QUERY_STRING'])=='' ? '' : '?') . $_SERVER['QUERY_STRING']; ?>');" title="Reload This Page" style="cursor:pointer;margin-right:10px;" />  <?php echo '/'.$this->data['controller_name'] . '/' . $this->data['action_name'] . '/' .(trim($_SERVER['QUERY_STRING'])=='' ? '' : '?') . $_SERVER['QUERY_STRING']; ?></div></div>
        <div class="br">&nbsp;</div>
    </div>
            
</div>
